<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="hd">
      <view class="money">
        <view class="font">我的投研币</view>
        <view class="number big">{{ userInfo.coin }}</view>
      </view>
      <view class="money">
        <view class="font">可提现</view>
        <view class="number">{{ body.money }}</view>
      </view>
      <view class="money">
        <view class="font">冻结中</view>
        <view class="number">{{ userInfo.freeze_coin }}</view>
      </view>
    </view>
    <view class="base">
      <view class="item">
        <button class="btn not" hover-class="none" @click="goWithdraw">提现</button>
      </view>
      <view class="item">
        <button class="btn" hover-class="none" @click="goTopUp">充值</button>
      </view>
    </view>
    <view class="small">余额历史</view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="layout">
          <view class="font">{{ item.title }}</view>
          <!-- <view class="font">¥8</view> -->
        </view>
        <view class="layout">
          <view class="font time">{{ timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
          <view class="font red">{{ item.change_type == 1 ? '+' : '-' }}{{ item.coin }}</view>
          
        </view>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { post } from '@/api';
import { useUser } from '@/store';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const coinObj = ref({
  1:"充值",
  2:"收到打赏",
  3:"社群分成",
  4:"拒审退款",
  5:"社群移除退款",
  6:"订单退款",
  7:"提现",
  8:"下单"
})
let body = ref({});
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

const userInfo = computed(() => {
  const store = useUser();
  return store.userInfo;
});
onShow(() => {
  list.value = [];
  page = 1;
  getData();
})

function getData(){
  post('api/recharge_config/getUserWithdrawRatio').then(res => {
    if(res.code == 1){
      const data = res.data;
      body.value = data;
      getList();
    }
  })
}
function getList(){
  const params = {
    page,
    limit
  }
  post('api/user_coin_log/userCoinLogList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})
function goTopUp(){
  uni.navigateTo({
    url: '/pages/mine/money/topup'
  });
}
function goWithdraw(){
  uni.navigateTo({
    url: '/pages/mine/money/withdraw'
  });
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    padding-bottom: 60rpx;
    .item{
      padding-top: 60rpx;
      .layout{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:first-child{
          padding-bottom: 16rpx;
        }
        .font{
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          &.red{
            font-weight: 500;
            color: #E43222;
          }
          &.time{
            color: #BFBFBF;
          }
        }
      }
    }
  }
  .small{
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    padding: 0 30rpx;
    padding-top: 100rpx;
    padding-bottom: 20rpx;
  }
  .base{
    width: 100%;
    padding: 0 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    .item{
      flex: 1;
      padding: 0 30rpx;
      height: 72rpx;
      line-height: 72rpx;
      .not{
        color: #E43222;
        background-image: linear-gradient(90deg, rgba($color: #FF644C, $alpha: .16) 0%, rgba($color: #E43222, $alpha: .16) 100%);
      }
      .btn{
        font-size: 28rpx;
      }
    }
  }
  .hd{
    width: 100%;
    background-color: #fff;
    padding: 50rpx 0;
    display: flex;
    align-items: center;
    .money{
      flex: 1;
      text-align: center;
      border-right: 1px solid rgba($color: #979797, $alpha: .33);
      &:last-child{
        border-right: 0;
      }
      .number{
        font-size: 38rpx;
        color: #E43222;
        &.big{
          font-size: 60rpx;
        }
      }
      .font{
        font-weight: 400;
        font-size: 26rpx;
        color: #959595;
        padding-bottom: 24rpx;
      }
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F5F5F5;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
  }
</style>